<template>
  <view class="hanzi-writer-container">
    <iframe 
      :src="htmlUrl" 
      class="hanzi-iframe"
      id="hanziIframe"
      ref="hanziIframe"
      @load="onIframeLoad"
    ></iframe>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';

// 定义props
const props = defineProps({
  character: {
    type: String,
    required: true
  }
});

// 定义emit
const emit = defineEmits(['ready']);

// 响应式状态
const htmlUrl = ref('');
const isReady = ref(false);
const iframeLoaded = ref(false);
const hanziIframe = ref(null);

// 监听字符变化
watch(() => props.character, (newVal) => {
  // 当字符变化时，直接更新URL以重新加载iframe
  htmlUrl.value = `/static/hanzi-writer.html?char=${newVal}&t=${Date.now()}`;
  iframeLoaded.value = false;
});

// 生命周期钩子 - 组件挂载
onMounted(() => {
  // 设置HTML URL，添加时间戳防止缓存
  htmlUrl.value = `/static/hanzi-writer.html?char=${props.character}&t=${Date.now()}`;
  console.log('HanziWriterView mounted, URL:', htmlUrl.value);
  
  // 监听来自iframe的消息
  window.addEventListener('message', handleIframeMessage);
});

// 生命周期钩子 - 组件卸载前
onBeforeUnmount(() => {
  // 移除事件监听器
  window.removeEventListener('message', handleIframeMessage);
});

// 方法
function onIframeLoad() {
  console.log('iframe 已加载');
  iframeLoaded.value = true;
  
  // 尝试直接调用iframe中的方法
  setTimeout(() => {
    try {
      const iframe = hanziIframe.value;
      if (iframe && iframe.contentWindow) {
        // 检查iframe是否已准备好
        if (typeof iframe.contentWindow.isReady === 'function' && iframe.contentWindow.isReady()) {
          isReady.value = true;
          emit('ready');
        }
      }
    } catch (e) {
      console.error('检查iframe准备状态失败:', e);
    }
  }, 500);
}

function handleIframeMessage(event) {
  console.log('收到iframe消息:', event.data);
  
  // 处理来自iframe的消息
  if (event.data && event.data.action) {
    const message = event.data;
    
    if (message.action === 'ready') {
      isReady.value = true;
      emit('ready');
      console.log('HanziWriter iframe 已准备就绪');
    }
  }
}

// 对外暴露的方法 - 使用URL参数触发动作
function animateCharacter() {
  console.log('播放笔顺动画');
  
  // 尝试直接调用iframe中的方法
  try {
    const iframe = hanziIframe.value;
    if (iframe && iframe.contentWindow && typeof iframe.contentWindow.animateCharacter === 'function') {
      iframe.contentWindow.animateCharacter();
      return;
    }
  } catch (e) {
    console.error('直接调用iframe方法失败:', e);
  }
  
  // 备用方法：通过更新URL参数来触发动作
  htmlUrl.value = `/static/hanzi-writer.html?char=${props.character}&action=animate&t=${Date.now()}`;
}

function quiz() {
  console.log('开始描红练习');
  
  // 尝试直接调用iframe中的方法
  try {
    const iframe = hanziIframe.value;
    if (iframe && iframe.contentWindow && typeof iframe.contentWindow.startQuiz === 'function') {
      iframe.contentWindow.startQuiz();
      return;
    }
  } catch (e) {
    console.error('直接调用iframe方法失败:', e);
  }
  
  // 备用方法：通过更新URL参数来触发动作
  htmlUrl.value = `/static/hanzi-writer.html?char=${props.character}&action=quiz&t=${Date.now()}`;
}

// 向父组件暴露方法
defineExpose({
  animateCharacter,
  quiz
});
</script>

<style>
.hanzi-writer-container {
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.hanzi-iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
}
</style> 